<template >
  <view class="shopcart">
    <!-- 适配状态栏 -->
    <view class="head flex-btw">
      <!-- #ifdef APP-PLUS -->
      <view class="status_bar"></view>
      <!-- #endif -->

      <view class="nodat">
        <my-shoping title="购物车" @plusdle="plusdle"></my-shoping>

        <scroll-view class="scroll_height" scroll-y="true">
          <view class="all_good">
            <template v-if="companysList.length">
              <view v-for="(company, companyIndex) in companysList" :key="company.company_id">
                <view class="shoppingcar" v-if="company.list.length">
                  <view class="company">
                    <u-checkbox-group>
                      <u-checkbox
                        @change="companyCheckedAll(companyIndex, $event)"
                        v-model="company.checked"
                        size="36rpx"
                        active-color="#40AE36"
                        shape="circle"
                        :name="company.company_name"
                        :disabled="!company.status"
                      />
                    </u-checkbox-group>
                    <view class="info-shop-logo">
                      <image :src="'https://copartner.oss-cn-beijing.aliyuncs.com/' +
                          company.site_logo||
                          '../../static/image/logo.jpg'
                        " style=""></image>
                    </view>
                    <text @click="goToCompant(company)">{{ company.company_name }}</text>
                    <u-icon name="arrow-right" color="#999999"></u-icon>
                  </view>
                  <u-swipe-action
                    class="shopindex"
                    :show="item.shows"
                    btn-width="150"
                    :index="index"
                    v-for="(item, index) in company.list"
                    :key="item.id"
                    @click="click(index, item)"
                    @open="open(companyIndex, $event)"
                    :options="options"
                    bg-color="transparent"
                  >
                    <view class="item u-border-bottom" v-if="item.num != 0">
                      <view class="shopimg">
                        <u-checkbox-group>
                          <u-checkbox
                            v-model="item.checked"
                            size="36rpx"
                            active-color="#40AE36"
                            shape="circle"
                            :name="item.name"
                            @change="shopChecked(companyIndex, index, $event)"
                            :disabled="company.status !== 1"
                          />
                        </u-checkbox-group>
                        <image
                          :src="item.img"
                          style="width: 160rpx; height: 160rpx"
                          mode="aspectFill"
                        ></image>
                      </view>
                      <view class="title-wrap flex">
                        <span class="span1 title u-line-1">{{
                          item.goods_name_order
                        }}</span>
                        <view class="title u-line-2 step">
                          <div class="title u-line-2">
                            <span>￥</span>
                            <span class="span3"
                              >{{ item.market_price
                              }}<span class="spu">/{{ item.spu_name }}</span></span
                            >
                          </div>
                          <my-steppers
                            v-if="item"
                            class="stepper_btn"
                            :min="item.minimum"
                            :limit="
                              item.inventory_hd ? 1 : item.designated_inventory
                            "
                            :inventory="item.inventory_hd || item.inventory_left"
                            :num="item.num"
                            :goods_id="item.goods_id"
                            :spu_id="item.spu_id"
                            :sign="string"
                            @plus="addAction(company, item, index, $event)"
                            @minus="subAction(company, item, index, $event)"
                            @showKey="openNumber(companyIndex, item, index)"
                          >
                            <!--   @showKey="
                              $refs.keyboard.open(
                                item.is_standard,
                                index,
                                item.minimum,
                                item.inventory_left,
                                item.designated_inventory
                              )
                            " -->
                          </my-steppers>
                        </view>
                        <span class="span2">
                          <view
                            class="datum pirce-color-btn"
                            :class="{ 'poverty-color-btn': itm.title === '扶贫' }"
                            v-for="itm in item.datum"
                            :key="itm.id"
                          >
                            {{ itm.title }}
                          </view>
                        </span>
                        <view class="qiding">
                          <text v-if="item.minimum > 0"
                            >起订量：{{ item.minimum }}</text
                          >
                          <text
                            v-if="
                              item.inventory_hd || item.designated_inventory > 0
                            "
                            style="margin-left: 20rpx"
                            >库存：{{
                              Number(item.inventory_hd || item.inventory_left)
                            }}</text
                          >
                        </view>
                        
                      </view>
                    </view>
                  </u-swipe-action>
                </view>
              </view>
            </template>
            <view class="aspect" v-else>
              <view class="old_aspet">
                <div class="old1">购物车空空如也</div>
                <div class="old2">赶紧慰劳一下自己吧</div>
                <u-button plain shape="circle" class="old3" @click="gertinfo"
                  >去逛逛</u-button
                >
              </view>
            </view>
          </view>

          <!-- 积分 -->
          <view class="gifts" v-if="flag_jf">
            <view class="tit">积分商品</view>
            <view class="lists">
              <template v-for="(item, index) in goodlist">
                <view
                  v-if="item.datum_activity == '积分'"
                  class="list flex-btw"
                  :key="index"
                >
                  <block v-if="item.datum_activity == '积分'">
                    <view style="display: flex; flex: 1">
                      <!-- #ifdef MP-WEIXIN-->
                      <!-- 微信小程序不认v-model !只可作用value!!!!! -->
                      <u-checkbox
                        class="checkbox flex-middle"
                        :value="item.isChecked"
                        :disabled="
                          item.is_enough == 0 ||
                          item.status == 0 ||
                          item.is_del == 1
                        "
                        @change="selectAction($event, index)"
                        :name="item.id"
                        size="24"
                        shape="circle"
                        active-color="#4fa388"
                      ></u-checkbox>
                      <!-- #endif -->
                      <!-- #ifndef MP-WEIXIN -->
                      <u-checkbox
                        class="checkbox flex-middle"
                        v-model="item.isChecked"
                        :disabled="
                          item.is_enough == 0 ||
                          item.status == 0 ||
                          item.is_del == 1
                        "
                        @change="selectAction($event, index)"
                        :name="item.id"
                        size="24"
                        shape="circle"
                        active-color="#4fa388"
                      ></u-checkbox>
                      <!-- #endif -->
                      <view class="left flex-btw">
                        <view class="flex-middle">
                          <img class="img" :src="item.img" alt="" />
                          <view class="flex-column" style="align-items: unset">
                            <text class="name">{{ item.goods_name }}</text>
                            <text class="jifen">{{ item.jf_points }}积分</text>
                          </view>
                        </view>
                        <text class="tag">积分</text>
                      </view>
                    </view>
                    <view class="flex-column">
                      <!-- #ifndef MP-WEIXIN -->
                      <my-stepper
                        :val="item.num"
                        :min="item.minimum"
                        :limit="
                          item.inventory_hd ? 1 : item.designated_inventory
                        "
                        :inventory="item.inventory_hd || item.inventory_left"
                        :index="index"
                        @plus="addAction"
                        @minus="subAction"
                        @showKey="
                          $refs.keyboard.open(
                            item.is_standard,
                            index,
                            item.minimum,
                            item.inventory_hd || item.inventory_left,
                            1
                          )
                        "
                      >
                      </my-stepper>
                      <!-- #endif -->
                      <!-- #ifdef MP-WEIXIN -->
                      <my-stepper
                        :val="item.num"
                        :min="item.minimum"
                        :limit="
                          item.inventory_hd ? 1 : item.designated_inventory
                        "
                        :inventory="item.inventory_hd || item.inventory_left"
                        :index="index"
                        @plus="addAction"
                        @minus="subAction"
                        @showKey="
                          $refs.keyboard.open(
                            item.$orig.is_standard,
                            index,
                            item.$orig.minimum,
                            item.$orig.inventory_hd ||
                              item.$orig.inventory_left,
                            1
                          )
                        "
                      >
                      </my-stepper>
                      <!-- #endif -->
                      <text class="store"
                        ><text
                          v-if="item.jf_once_gailimit > 0"
                          style="margin-right: 8rpx"
                          >单次限购：{{ item.jf_once_gailimit }}</text
                        >库存：{{
                          Number(item.inventory_hd || item.inventory_left)
                        }}</text
                      >
                    </view>
                  </block>
                </view>
              </template>
            </view>
          </view>

          <!-- 赠品 -->
          <view
            class="gifts"
            v-if="
              mjmz_content.type == 2 && mjmz_content.mz_info.zp_list.length > 0
            "
          >
            <view class="tit">赠品区</view>
            <view class="lists">
              <view
                class="list flex-btw"
                v-for="(item, index) in mjmz_content.mz_info.zp_list"
                :key="index"
              >
                <view class="left flex-middle">
                  <image class="img" :src="item.img"></image>
                  <text class="name"
                    >{{ item.goods_name }}【{{ item.spu_name }}】</text
                  >
                  <text class="tag">赠品</text>
                </view>
                <text>×{{ item.num }}</text>
              </view>
            </view>
          </view>
        </scroll-view>
        <view class="discounts_info flex-btw" v-if="false">
        <!-- <view class="discounts_info flex-btw" v-if="mjmz_content.type"> -->
          <!-- 满减 -->
          <view v-if="mjmz_content.type == 1" style="flex: 1">
            <text v-if="mjmz_content.mj_info.full_reduction_money != 0"
              >已减 {{ mjmz_content.mj_info.full_reduction_money }} 元</text
            ><text v-if="mjmz_content.mj_info.need_buy != 0"
              >再买
              <text class="red">{{ mjmz_content.mj_info.need_buy }}</text> 元减
              <text class="red">{{ mjmz_content.mj_info.will_reduction }}</text>
              元</text
            >
          </view>
          <!-- 满赠 -->
          <view v-if="mjmz_content.type == 2" style="flex: 1">
            <text v-if="mjmz_content.mz_info.got_zp"
              >已送 {{ mjmz_content.mz_info.got_zp }} </text
            ><text v-if="mjmz_content.mz_info.need_buy != 0">
              再买
              <text class="red">{{ mjmz_content.mz_info.need_buy }}</text> 元送
              <text class="red">{{ mjmz_content.mz_info.will_get }}</text></text
            >
          </view>
          <view>
            <view
              v-if="mjmz_content.add_item == 1"
              class="red"
              @click="toClassify"
              >去凑单<u-icon name="arrow-right"></u-icon>
            </view>
          </view>
        </view>
      </view>
    </view>
    <view class="suggest" v-if="false">
      <image
        src="/static/images/tit-icon-l.png"
        style="width: 40rpx; height: 22rpx"
      ></image>
      <span>为你推荐</span>
      <image
        src="/static/images/tit-icon-r.png"
        style="width: 37rpx; height: 22rpx"
      ></image>
    </view>
    <div class="shopBox" :style="shopLists">
      <div
        class="shopBox-item"
        v-for="(item, index) in shopList"
        :key="index"
        @click="deleteInfo(item)"
      >
        <div class="shopBox-item-img">
          <image
            :src="item.img || '../../static/image/logo.jpg'"
            mode="aspectFit"
          ></image>
        </div>
        <span class="shopBox-item-title">{{ item.name }}</span>
        <div class="shopBox-item-num row_between">
          <div class="shopBox-item-num-price pirce-color">
            ￥<span class="num">{{ item.spu[0].market_price | zeros }}</span
            ><span class="spu">/{{ item.spu[0].spu_name }}</span>
          </div>
          <div class="icons" @click.stop="addShop(index)"></div>
        </div>
      </div>
      <view class="shopbottom"></view>
    </div>
    <view class="selectall">
      <view class="quanx">
        <u-checkbox-group>
          <u-checkbox
            @change="checkedAll"
            v-model="allChecked"
            size="36rpx"
            active-color="#40AE36"
            shape="circle"
            :name="list.name"
          />
        </u-checkbox-group>
        <span>全选</span>
      </view>
      <view class="heji">
        <span>合计：</span>
        <span class="heji1">￥</span>
        <span class="heji2">{{ allTotal }}</span>
        <u-button shape="circle" class="old4" @click="getrsettlement"
          >去结算</u-button
        >
      </view>
    </view>
    <my-addcart
      ref="minicart"
      @tabBarTag="changeTabBarTag"
      :canshowprice="canshowprice"
    ></my-addcart>
    <my-keyboard @confirm="inputPrice" ref="keyboard"></my-keyboard>
    <my-tabar :types="1" ref="tabar" current="2"></my-tabar>
  </view>
</template>

<script>
import { mixins } from "@/mixins/judgment.js";
import { $https } from "@/static/js/request.js";
import { mapState } from "vuex";
export default {
  mixins: [mixins],
  computed: {
    ...mapState(["companyInfo", "currentRoute"]),
    shopLists() {
      return {
        "--length": this.shopList.length,
      };
    },
    allTotal() {
      const list = []
      this.companysList.forEach(el => {
        el.list.forEach(item => {
          if(item.checked) list.push(parseFloat(item.market_price) * Number(item.num))
        })
      })
      let total = 0
      if(list.length) {
        total = eval(list.join('+'))
      }
      return this.filterTotal(total)
    }
  },
  data() {
    return {
      sules: 0,
      flag_jf: false, //是否有积分商品
      mjmz_content: {}, //type:0:啥都没有, 1:满减 2:满赠
      btnWidth: 90,
      canshowprice: false,
      checkboxValue1: [],
      shopList: [],
      page: 1, // 当前页数
      count: 0, // 当前公司总数
      goodlist: [], //购物车列表
      // 基本案列数据
      list: {
        checked: false,
        shows: false,
        name: "dfa",
      },
      options: [
        {
          text: "删除",
          style: {
            backgroundColor: "#dd524d",
          },
        },
      ],
      min: 0,
      max: 0,
      // willBuyNum: 0,
      limit: null, //是否无限量供应，1有限制，会显示剩余库存
      disabled: false,
      val: 0,
      string: "string",
      timeStamp: "",
      // numn: 1,
      amountto: 0, //总价格
      checkedList: [], //已经选择的id
      tag: 1, //改变底部导航栏购物车tag
      shouldPreventScrolling: false, // 强制回到顶部
      companysList: [],
      allChecked: false,
      companyIndex: null
    };
  },
  filters: {
    zeros(num) {
      return +num.toString().replace(/(\.[0-9]*[1-9])0+$/, "$1");
    },
  },
  onShow() {
    if (this.currentRoute != "pages/index/shopdetail") {
      this.page = 1;
      // this.getShopInfo();
      uni.pageScrollTo({
        scrollTop: 0,
        duration: 10, // 可选，滚动时间，默认300ms
      });
    }
    this.getCard();

    this.allChecked = false; //返回页面取消全选按钮
  },

  methods: {
    //  过滤总数，整数就加上.00，小数点1位就补齐0
    filterTotal(num) {
      num = num.toString()
      if(num.includes('.')) {
        if(num.split('.')[1].length > 1) {
          return Number(num).toFixed(2)
        }else {
          return num + '0'
        }
      }else {
        return num + '.00'
      }
    },
    deleteInfo(info) {
      uni.navigateTo({
        url: `/pages/index/shopdetail?id=${info.goods_id}&company_id=${this.companyInfo.supplier_id}`,
      });
    },
    goToCompant(item) {
      if(item.status) {
        this.determine(item);
      } 
    },
    click(index, item) {
      console.log("111", index, item);
      const sule = {
        goods_id: item.goods_id,
        num: 0,
        spu_id: item.spu_id,
        sign: "",
        timeStamp: new Date().getTime(),
      };

      uni.showModal({
        content: "是否删除该商品",
        confirmColor: "#4FA388",
        success: (res) => {
          if (res.confirm) {
            this.postchangeCart(item, sule);
            this.goodlist.splice(index, 1);
            this.tag = this.tag - item.num;
            this.$refs.tabar.changetag(this.tag);
            this.toamount();
            this.getShopInfo();
            uni.showToast({
              title: "删除成功！",
              icon: "none",
            });
          } else if (res.cancel) {
            // console.log("用户点击取消");
            this.goodlist[index].shows = false;
          }
        },
      });
    },
    // 如果打开一个的时候，不需要关闭其他，则无需实现本方法
    open(companyIndex, index) {
      this.companysList[companyIndex].list[index].show = false
      // 先将正在被操作的swipeAction标记为打开状态，否则由于props的特性限制，
      // 原本为'false'，再次设置为'false'会无效
      this.companysList[companyIndex].list.map((val, idx) => {
        if (index != idx) this.companysList[companyIndex].list[idx].shows = false;
      });
    },
    //  打开数字键盘
    openNumber(companyIndex, item, index) {
      this.$refs.keyboard.open(item.is_standard, index, item.minimum, item.inventory_left, item.designated_inventory)
      this.companyIndex = companyIndex
    },
    // 跳转到主页
    gertinfo() {
      uni.switchTab({
        url: `/pages/shop/index`,
      });
      // console.log("111");
    },
    // 全选
    checkedAll(e) {
      this.companysList.filter(el => el.status).forEach(el => {
        el.checked = e.value
        el.list.forEach(item => {
          item.checked = e.value
        })
      })
    },
    //  供应商全选
    companyCheckedAll(index, $event) {
      if($event.value) {
        this.companysList[index].checked = true
        this.companysList[index].list.forEach(el => {
          el.checked = true
        })
      }else {
        this.companysList[index].checked = false
        this.companysList[index].list.forEach(el => {
          el.checked = false
        })
      }
      this.changeAllChecked()
    },
    //  单个商品切换选中状态
    shopChecked(companyIndex) {
      this.$nextTick(() => {
        const list = this.companysList[companyIndex].list.filter(el => el.checked)
        this.companysList[companyIndex].checked = list.length === this.companysList[companyIndex].list.length
        this.changeAllChecked()
      })
    },
    //  底部全选切换
    changeAllChecked() {
      const list = this.companysList.filter(el => el.status).filter(el => el.checked)
      this.allChecked = list.length === this.companysList.filter(el => el.status).length
    },
    // 合计
    toamount() {
      // 获取勾选的总价格
      // console.log("合计", this.goodlist);
      this.amountto = this.goodlist.reduce((p, c) => {
        let rest = 0;
        if (c.checked) {
          rest = parseFloat(c.market_price) * Number(c.num);
        }
        p = p + rest;
        return p;
      }, 0);

      // console.log("this.amountto", this.amountto);
      this.amountto = Math.floor(this.amountto * 100) / 100;
      //  获取勾选的id
      this.checkedList = [];
      this.goodlist.map((item) => {
        if (item.checked) {
          // return this.checkedList.push(item.goods_id);
          return this.checkedList.push(item.id);
        }
      });
    },

    // 点击加号
    addAction(company, item, i, $event) {
      // console.log("addAction", company, item, i, $event);
      var index = i,
        min = Number($event.min),
        limit = Number($event.limit),
        inventory = Number($event.inventory),
        val = Number($event.num);
      if (val < min) {
        val = min;
      } else if (limit > 0 && val >= inventory) {
        //不能超过库存量
        val = inventory;

        uni.showToast({
          icon: "none",
          title: "库存不足",
        });
        this.goodlist[index].num = Number(val);
        console.log("111", val);
      } else {
        val++;
        const data = {
          goods_id: $event.goods_id,
          num: val,
          sign: $event.sign,
          spu_id: $event.spu_id,
          timeStamp: $event.timeStamp,
        };
        this.postchangeCart(company, data, index);
      }
    },
    // 点击减号
    subAction(company, item, index, $event) {
      // console.log("subAction", company, item, index, $event);
      var min = Number($event.min),
        inventory = Number($event.inventory),
        val = Number($event.num),
        enough = false;
      if (val < min) {
        val = 0;
      }
      if (val <= inventory) {
        enough = true;
      }
      const data = {
        goods_id: $event.goods_id,
        num: val,
        sign: $event.sign,
        spu_id: $event.spu_id,
        timeStamp: $event.timeStamp,
      };

      this.postchangeCart(company, data, index, enough);
      if (val == 0) {
        this.tag--;
        console.log(this.tag);
        this.$refs.tabar.changetag(this.tag);
        this.getShopInfo();
      }
    },

    // 点击数字
    inputPrice(data) {
      // value: this.value,(数量)
      //   index: this.index,(下标)
      //   inventory: this.max,(库存)
      var enough = false;
      var val = Number(data.value).toFixed(0);
      //在购物车里超过库存后，数量减到库存之下，库存不足标识应去掉
      if (val <= data.inventory) {
        enough = true;
      }
      const list = this.companysList[this.companyIndex].list[data.index]
      this.companysList[this.companyIndex].list[data.index].num = val
      var sult = {
        goods_id: list.goods_id,
        spu_id: list.spu_id,
        num: val,
      };

      this.postchangeCart(this.companysList[this.companyIndex], sult, data.index, enough);
      // this.toamount();
      // this.$refs.tabar.changetag(this.tag);
      if (val == 0) {
        this.tag--;
        this.$refs.tabar.changetag(this.tag);
        this.getShopInfo();
      }
    },
    addShop(index) {
      // goodlist 里面的spu_id 对应this.shopList spu的id
      let data = this.shopList[index];
      this.shopList[index].spu.forEach((item, index) => {
        let info = this.goodlist.find((itm) => itm.spu_id == item.id);
        if (info) {
          // 如果找到就赋值
          this.$set(data.spu[index], "cart_num", info.num);
        }
      });
      this.$refs.minicart.open(data);
    },

    changeTabBarTag(num) {
      //改变底部导航栏购物车tag
      // console.log("num", num);
      this.$refs.tabar.changetag(num);
      // this.getShopInfo();
      this.getCard();
      this.list.checked = false; //取消全选
      this.amountto = 0; //清空勾选价格
    },

    //  为你推荐
    getShopInfo(page = 1) {
      let data = {
        page: page,
        size: 10,
        company_id: this.companyInfo.supplier_id,
      };
      $https("GET", "getGoodsSelect", data, (res) => {
        if (res.data.errcode == 0) {
          // 获取一级分类(最多只展示10个分类,多余的自动删除)
          // let list = res.data.data.first_list
          // this.classifiList = []
          if (page == 1) this.shopList = [];
          res.data.data.list.forEach((item) => {
            this.shopList.push(item);
          });
          this.count = res.data.data.count;
        } else {
          uni.showToast({
            icon: "none",
            title: res.data.errmsg,
          });
        }
      });
    },
    // 获取购物车列表
    getCard() {
      $https('GTEN', 'cart-list', {}, res => {
        const data = res.data.data
        if(res.data.errcode == 0) {
          if(data.companys) {
            this.allChecked = false;
            this.tag = eval(data.companys.map(el => el.list.length).join('+'));
            data.companys.forEach(el => {
              el.checked = false
              el.list.forEach(item => {
                item.checked = false,
                item.shows = false
              })
            })
            this.companysList = data.companys
            this.$refs.tabar.changetag(this.tag);
          }else {
            this.companysList = []
            this.tag = 0
            this.$refs.tabar.changetag(this.tag);
          }
        } else {
          // uni.showToast({
          //   icon: "none",
          //   title: res.data.errmsg,
          // });
        }
      })
    },
    // 清空购物车
    plusdle() {
      this.goodlist = [];
      this.getCard();
    },

    // 去结算
    getrsettlement() {
      //  if (this.checkedList.length > 0 && this.allPrice > 0) {
      if (this.allTotal > 0) {
        const list = []
        const company_id = []
        this.companysList.forEach(el => {
          el.list.forEach(item =>  {
            if(item.checked) {
              list.push(item.id)
              if(!company_id.includes(el.company_id))company_id.push(el.company_id)
            }
          })
        })
        var params = JSON.stringify(list);
        uni.navigateTo({
          url: `/pages/shopcart/submitorder?ids=${params}&company_id=${company_id.join(',')}`,
        });
      } else {
        uni.showToast({
          title: "下单金额必须大于0！",
          icon: "none",
        });
      }
    },
    //  加减购物车数据
    postchangeCart(company, options, index = 1, enough = false) {
      // console.log("daagf", options);
      // this.getShopInfo();
      // options.company_id = company.company_id
      $https(
        "POST",
        `changeCart?company_id=${company.company_id}`,
        options,
        (res) => {
          if (res.data.errcode == 0) {
            //成功后修改数量
            const companyIndex = this.companysList.findIndex(el => el.company_id === company.company_id)
            if (options.num) {
              this.companysList[companyIndex].list[index].num = options.num
              // this.goodlist[index].num = Number(options.num);
              // this.sules = this.goodlist[index].num;
            }

            //修改库存不足状态
            // if (enough) {
            //   this.goodlist[index].is_enough = 1;
            // }
            //如果等于0就取消勾选
            if (options.num == 0) {
              this.checkedList.splice(index, 1);
              this.$nextTick(() => {
                this.getCard()
              })
            }
            if (res.data.data.mjmz_content) {
              this.mjmz_content = res.data.data.mjmz_content;
            }
            // this.companysList[companyIndex].list[index].is_origin_price = res.data.data.tm_content ? 1 : 0
          } else if (res.data.errcode == 50009) {
            uni.showToast({
              title: res.data.errmsg,
              icon: "none",
            });
          } else if (res.data.errcode == -1) {
            this.goodlist[index].num = this.sules;
            uni.showToast({
              title: res.data.errmsg,
              icon: "none",
            });
          } else {
            uni.showToast({
              title: res.data.errmsg,
              icon: "none",
            });
          }
        }, true, 'application/x-www-form-urlencoded'
      );
    },
  },
  onHide() {
    this.page = 1;
    // uni.pageScrollTo({
    //   selector: ".shopBox",
    //   scrollTop: 2,
    //   duration: 300,
    // });
  },
  onReachBottom() {
    //如果请求到底就请求下一列表
    if (this.shopList.length < this.count) {
      this.page++;
      this.getShopInfo(this.page);
    }
  },
};
</script>

<style lang="scss">
$length: var(--length) / 2;
.shopcart {
  width: 750rpx;
  background: #f8f9fa;
}

.shoppingcar {
  margin: 20rpx 30rpx 20rpx 30rpx;
  width: 690rpx;
  background: #ffffff;
  border-radius: 10rpx;
  .company {
    padding: 30rpx 0 30rpx 20rpx;
    border-bottom: 1px solid #EBEBEB;
    display: flex;
    align-items: center;
    text {
      font-weight: bold;
      font-size: 30rpx;
      color: #333;
    }
    .info-shop-logo {
      width: 30rpx;
      height: 30rpx;
      margin-right: 10rpx;
      image {
        width: 100%;
        height: 100%;
        border-radius: 50%;
      }
    }
  }

  .shopindex {
    width: 690rpx;
    height: 240rpx;
    display: flex;
    margin-top: 20rpx;
    border-radius: 20rpx;

    .shopimg {
      width: 270rpx;
      height: 240rpx;
      display: flex;
      align-items: center;

      image {
      }
      .u-checkbox {
        margin-left: 20rpx;
      }
    }
    .flex {
      flex: 1;
      padding: 15rpx 20rpx 15rpx 0;
      display: flex;
      flex-direction: column;
      justify-content: space-evenly;
      .span1 {
        margin-top: 20rpx;
        font-size: 32rpx;
        font-family: PingFang SC;
        font-weight: 400;
        color: #333333;
        // line-height: 36rpx;
        font-weight: bold;
      }
      .span2 {
        font-size: 22rpx;
        font-family: PingFang SC;
        font-weight: 400;
        color: white;
        display: flex;
        margin-bottom: 20rpx;
        .datum {
          border-radius: 10rpx;
          padding: 2rpx 12rpx;
          margin-right: 10rpx;
        }
      }
      .qiding {
        font-size: 24rpx;
        font-family: PingFang SC;
        font-weight: 400;
        color: $color_35;
      }

      .step {
        display: flex;
        justify-content: space-between;
        align-items: center;
        position: relative;

        span {
          font-size: 22rpx;
          color: #f55726;
        }
        .span3 {
          font-size: 36rpx;
        }
        .spu {
          font-size: 22rpx;
          font-weight: bold;
        }
      }
    }
  }
}

.aspect {
  margin: 20rpx 30rpx 20rpx 30rpx;
  width: 690rpx;
  height: 304rpx;
  background: #ffffff;
  border-radius: 20px;
  display: flex;
  justify-content: center;
  align-items: center;

  .old_aspet {
    height: 224rpx;
    display: flex;
    flex-direction: column;
    align-items: center;
    // width: 150rpx;
    justify-content: space-around;
    position: absolute;
    .old1 {
      font-size: 32rpx;
      font-family: PingFang SC;
      font-weight: 500;
    }
    .old2 {
      font-size: 28rpx;
      font-family: PingFang SC;
      font-weight: 400;
      color: #999999;
    }
    .old3 {
      background: #ffffff;
      color: #40ae36;
    }
  }
}
.suggest {
  padding: 30rpx 0;
  width: 100%;
  display: flex;
  justify-content: center;
  span {
    font-size: 30rpx;
    font-family: PingFang SC;
    font-weight: 500;
    color: #333333;
    margin: 0 23rpx;
  }
  image {
    margin-top: 16rpx;
  }
}

.shopBox {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat($length, 300rpx);
  gap: 20rpx;
  padding: 0 30rpx;
  margin-bottom: 110rpx;
  &-item {
    width: 334rpx;
    // height: 360rpx;
    border-radius: 20rpx;
    background-color: #fff;

    &-img {
      width: 100%;
      height: 300rpx;
      margin: 20rpx auto 0;
      border-radius: 20rpx;

      image {
        width: 100%;
        height: 100%;
      }
    }

    &-title {
      padding: 0 30rpx;
      font-size: 32rpx;
      font-weight: bold;
      color: #333333;
      display: inline-block;
      width: calc(100% - 40rpx);
      white-space: pre-wrap;
      margin: 20rpx auto 0;
      font-family: PingFang SC;
    }

    &-num {
      align-items: center;
      padding: 0 20rpx 20rpx;
      margin: 20rpx auto 0;

      &-price {
        font-size: 22rpx;
        font-family: PingFang SC;
        font-weight: bold;
        .num {
          font-size: 36rpx;
        }
        .spu {
          font-size: 22rpx;
          font-weight: bold;
        }
      }

      .icons {
        width: 44rpx;
        height: 44rpx;
        background-color: #40ae36;
        text-align: center;
        line-height: 44rpx;
        border-radius: 50%;
        background-image: url("../../static/images/gouwuche2.png");
        background-size: 100% 100%;
      }
    }
  }

  .shopbottom {
    margin: 40rpx 0;
  }
}

.selectall {
  position: fixed;
  bottom: 98rpx;
  width: 750rpx;
  height: 100rpx;
  background: #ffffff;
  border-radius: 0px;
  display: flex;
  align-items: center;
  justify-content: space-between;

  .quanx {
    margin-left: 20rpx;
    position: relative;
    span {
      margin-left: 20rpx;
      font-size: 24rpx;
      font-family: PingFang SC;
      font-weight: 400;
      color: #333333;
      position: relative;
      left: -30rpx;
    }
  }

  .heji {
    display: flex;
    align-items: center;
    .heji1 {
      font-size: 22rpx;
      margin-top: 10rpx;
      color: #F55726;
      font-weight: bold;
    }
    .heji2 {
      font-size: 36rpx;
      color: #F55726;
      font-weight: bold;
      margin-right: 20rpx;
    }

    .old4 {
      background: #40ae36;
      color: #eeee;
      height: 70rpx !important;
      width: 160rpx !important;
      margin-right: 30rpx;

      // /deep/ .u-size-default {
      //   height: 35px !important;
      // }
    }
  }
}

.item {
  display: flex;
  // padding: 20rpx;
}

.stepper_btn {
  position: relative;
  left: -16rpx;
}
// image {
//   width: 120rpx;
//   flex: 0 0 120rpx;
//   height: 120rpx;
//   margin-right: 20rpx;
//   border-radius: 12rpx;
// }

.title {
  // text-align: left;
  // font-size: 28rpx;
  // color: $u-content-color;
  // margin-top: 20rpx;
}

.title-wrap {
  // width: 260rpx;
}

/deep/ .u-swipe-view {
  width: 850rpx !important;
}
</style>

